feat: expandable pills and tool workflow styling from Ozwell widget - #294

src/components/PillSelect/PillSelect.tsx:49

• When the collapsed trigger is clicked, the focused <button> is unmounted and replaced by the expanded option buttons. Without moving focus, keyboard users can lose focus (often ending up on document.body) and have to tab around to find the options. Add a small effect to focus the selected (or first enabled) option when expanding.

  useClickOutside(ref, () => setExpanded(false), expanded);
  useEscapeKey(() => setExpanded(false), expanded);

src/components/PillSelect/PillSelect.tsx:50

• When the collapsed trigger button is activated, it’s immediately removed from the DOM and replaced with the expanded button list. This causes focus to be lost (especially for keyboard users), making the control hard to use without a mouse. Consider moving focus into the expanded options on open, and restoring focus to the collapsed trigger on close (without focusing anything on initial mount).

  const [expanded, setExpanded] = React.useState(false);
  const ref = React.useRef<HTMLDivElement>(null);

  const value = controlledValue !== undefined ? controlledValue : internalValue;
  const selectedOption = options.find((o) => o.value === value);

  useClickOutside(ref, () => setExpanded(false), expanded);
  useEscapeKey(() => setExpanded(false), expanded);

src/components/PillSelect/PillSelect.tsx:80

• Menu positioning can compute a negative left when menuWidth exceeds the available viewport width. left is clamped using menuWidth, but CSS later applies maxWidth, so the actual rendered width can be smaller than the value used for clamping, causing the popup to shift off-screen on narrow viewports.

Clamp using the effective width (min(menuWidth, maxWidth)) and also clamp minWidth so it never exceeds maxWidth.

    const maxWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
    const left = Math.min(
      Math.max(rect.left, viewportPadding),
      window.innerWidth - menuWidth - viewportPadding
    );

src/components/PillSelect/PillSelect.tsx:172

• PillSelect exposes role="listbox"/role="option" semantics, but it doesn't implement expected listbox keyboard interactions (ArrowUp/ArrowDown/Home/End navigation). Without this, assistive tech users can get a listbox that only works via Tab, which is inconsistent with the ARIA listbox pattern.

Either remove the listbox roles and treat these as plain buttons, or add minimal arrow-key navigation that moves focus among enabled options.

          <div
            ref={menuRef}
            id={listboxId}
            role="listbox"
            aria-label={label ? `${label} options` : 'Options'}

src/components/PillSelect/PillSelect.tsx:82

• updateMenuPosition calculates left using menuWidth even though the menu can be constrained by maxWidth. If rect.width is larger than the available viewport width, CSS will clamp the menu via maxWidth, but left will still be computed against the larger menuWidth, which can produce a negative/off-screen left value. Compute left using the effective (clamped) width and avoid minWidth exceeding maxWidth.

    const menuWidth = Math.max(rect.width, 160);
    const maxWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
    const left = Math.min(
      Math.max(rect.left, viewportPadding),
      window.innerWidth - menuWidth - viewportPadding
    );

src/components/PillSelect/PillSelect.tsx:80

• Menu positioning can place the portaled listbox partially off-screen on narrow viewports. left is computed using the unclamped menuWidth, and minWidth: rect.width can override maxWidth (when the trigger is wider than the viewport), defeating the horizontal clamp and causing overflow.

    const menuWidth = Math.max(rect.width, 160);
    const maxWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
    const left = Math.min(
      Math.max(rect.left, viewportPadding),
      window.innerWidth - menuWidth - viewportPadding
    );